<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 一、定义一个对象 Object.defineProperties
        //    var obj = Object.defineProperties({},{
        //     // 定义一个 name属性
        //         name:{
        //             configurable:true,
        //             enumerable:true,
        //             get:function(){
        //                 console.log("获取值");
        //                 return "张安";
        //             },
        //             set:function(newvalue){
        //                 console.log("新值是",newvalue)
        //             }
        //         },
        //         age:{
        //             configurable:true,
        //             enumerable:true,
        //             get:function(){
        //                 console.log("获取值age");
        //                 return 20
        //             },
        //             set:function(newvalue){
        //                 console.log("新值是age",newvalue)
        //             }
        //         }
        //    })
        //    console.log(obj);


        // 二、创建或者修改一个对象；
        //  Object.defineProperty ： 是 vue2.0 的响应式原理的核心函数。
        //                             vue3.0 通过 ES6里的 Proxy的内置构造函数实现响应式
        //  Object.defineProperty

        // 1.创建一个对象 
        // var  obj = Object.defineProperty({},"name",{
        //     configurable:true,
        //     enumerable:true,
        //     get:function(){
        //         console.log("get执行了");
        //         return "张三";
        //     },
        //     set:function(newvalue){
        //         console.log("新值",newvalue);
        //     }
        // })

        // console.log(obj);


        // 2.把一个普通对象 修改成一个可控制(可观察的)对象

        var obj = {
            name: "张安",
            age: 20
        }
        // console.log(obj);


        function observer(obj) {
            for (var key in obj) {
                // (function (key) {
                    let value = obj[key];
                    Object.defineProperty(obj, key, {
                        configurable: true,
                        enumerable: true,
                        get: function () {
                            console.log("get");
                            return value;
                        },
                        set: function (newvalue) {
                            console.log("set");
                            value = newvalue;
                        }
                    })
                // })(key)

            }
        }
        // console.log(obj);  // 普通对象  
        observer(obj);  // 修改obj为一个可观察的对象；
        console.log(obj);  // 可观察的对象 

    // Object.defineProperty(obj,"name",{
    //     configurable:true,
    //     enumerable:true,
    //     get:function(){
    //         console.log("get")
    //         return "李四"
    //     },
    //     set:function(newvalue){
    //         console.log("新值",newvalue);
    //     }
    // })



    </script>
</body>

</html>